<template>
  <div class="see-all-wrong">
    <div class="header">
      <span>{{ student.studentName }}的错题集</span>
    </div>
    <div class="content">
       <div class="search">
        <div>
          <el-select v-model="searchParams.difficult" placeholder="请选择难度" size="small" clearable  @change="searchQuestion">
            <el-option v-for="item in difficultyList" :key="item" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="time-range">
          <span style="margin-right: 10px">时间范围</span>
          <el-date-picker 
            v-model="searchParams.date" 
            type="daterange"
            range-separator="至" 
            start-placeholder="开始日期" 
            end-placeholder="结束日期" 
            size="small" 
            :shortcuts="shortcuts" 
            @change="timeChange"
            unlink-panels>
            </el-date-picker>
        </div>
      </div>
      <div class="content-main">
        <StudentQuestionComponent :searchParams="searchParams" ref="studentRef"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, reactive } from 'vue'
import Moment from 'moment'
import StudentQuestionComponent from './student-question.vue'
interface SearchParams {
  date: Array<string>;
  startDate: string; //开始时间默认三个月前
  endDate: string;
  difficult: any;//难度
  lessonType: number; //2是小组课 1是一对一
  studentIds: Array<string>;
  // studentId: String
}

export default {
  props: {
    student: {
      type: Object,
      default: () => ({})
    },
    params: {
      type: Object,
      default: () => ({})
    }
  },
  components: { StudentQuestionComponent },
  setup (props) {
    let searchParams: SearchParams = reactive({
      ...props.params,
      date:[Moment(new Date().getTime() - 3600 * 1000 * 24 * 90).format("YYYY-MM-DD"), Moment().format("YYYY-MM-DD")],
      startDate: Moment(new Date().getTime() - 3600 * 1000 * 24 * 90).format("YYYY-MM-DD"), //开始时间默认三个月前
      endDate: Moment().format("YYYY-MM-DD"), 
      difficult: null, //难度
      lessonType: 2, //2是小组课 1是一对一
      lessonIds: [],
      studentIds: [props.student.studentId],
      // studentId: props.student.id, //班级下学生的错题需要学生id
    })
    let difficultyList = ref([
      { name: "易", id: 11 },
      { name: "较易", id: 12 }, 
      { name: "中档", id: 13 },
      { name: "较难", id: 14 },
      { name: "难", id: 15 },
    ])
    let shortcuts= ref([
    {
      text: '最近一周',
      value: (() => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      })(),
    }, {
      text: '最近一个月',
      value: (() => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      })(),
    }, {
      text: '最近三个月',
      value: (() => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      })(),
    }])
    let studentRef = ref()
    setTimeout(() => {
      studentRef.value.request(searchParams)
    })
    const searchQuestion = () => {
      studentRef.value.request(searchParams)
    }
    const timeChange = (val: string[]) => {
      searchParams.startDate = Moment(val[0]).format("YYYY-MM-DD");
      searchParams.endDate = Moment(val[1]).format("YYYY-MM-DD");
      studentRef.value.request(searchParams)
    };
    return { searchParams, difficultyList, shortcuts, searchQuestion, timeChange, studentRef }
  },
}
</script>
<style lang="scss" scoped>
  .see-all-wrong {
    .header {
      background: $--color-primary;
      padding: 0 80px;
      display: flex;
      height: 60px;
      line-height: 60px;
      color: #fff;
      display: flex;
      justify-content: center;
      & > span {
        font-size: 18px;
      }
    }
    .content {
      width: 1120px;
      margin: 20px auto;
      height: 100%;
      padding: 30px 50px;
      background: #fff;
      box-shadow: 0px 2px 12px 0px rgb(0 0 0 / 10%);
      border: 1px solid #eee;
      overflow: auto;
      position: relative;
      .search {
        display: flex;
        & > div {
          margin-left: 20px;
          &:first-of-type {
            margin-left: 0;
          }
        }
        .time-range {
          min-width: 200px;
          display: flex;
          align-items: center;
          & > span {
            min-width: 60px;
          }
        }
        .time-radio {
          min-width: 200px;
        }
      }
      .content-main {
        height: calc(100% - 46px);
      }
    }
  }
   
</style>